<template>
<div class="refund-details" v-if="orderDetails">
    <div class="refund-details-nav">
        <a href="buyPayList.php"><img src="./img/vector.png" alt="" /></a>
        <span>退款成功</span>
        <p>服务未使用，已于{{ refundAt }}快速退款</p>
        <p>已退回至微信支付钱包 (¥{{ orderDetails.service_money }})</p>
    </div>
    <div class="refund-details-content">
        <div class="progress-box active success">
            <div class="progress active"></div>
            <span><em class="complete"></em></span>
            <span><em class="complete"></em></span>
            <!-- <span><em class="active"></em></span> -->
            <span><em class="complete"></em></span>
        </div>
        <div class="title">
            <span>提交申请</span>
            <span>待退款</span>
            <!-- <span>受理中</span> -->
            <span>退款成功</span>
        </div>
        <!-- <ul class="details">
            <li class="item first">
                <div class="left">2022/09/12 12:23:23</div>
                <div class="right">
                    <p class="name">
                        退款成功！款项已成功退至所填收款账号，请注意查收。
                    </p>
                </div>
            </li>
            <li class="item">
                <div class="left">2022/09/12 12:23:23</div>
                <div class="right">
                    <p class="name">
                        收款信息已提交，大枣将在7个工作日内对您提交的收款信息进行审核，审核通过后开始退款。查看收款信息>
                    </p>
                </div>
            </li>
            <li class="item">
                <div class="left">2022/09/12 12:23:23</div>
                <div class="right">
                    <p class="name">
                        审核已通过，大枣已受理您的退款申请，请在3个工作日内提交收款信息。
                    </p>
                </div>
            </li>
            <li class="item last">
                <div class="left">2022/09/12 12:23:23</div>
                <div class="right">
                    <p class="name">退款申请已提交，客服将在3个工作日内完成审核。</p>
                </div>
            </li>
        </ul>
        <div class="put-away">
            <img src="./img/top.png" alt="" />
            <span>查看更多</span>
        </div> -->
    </div>
    <div class="refund-details-info">
        <p class="title">退款信息</p>
        <p class="info">
            <span>美团外卖接单服务(有效期{{ orderDetails.buy_month }}个月)</span>
            <em>¥{{ orderDetails.service_money }}</em>
        </p>
        <p class="refund">
            <span>实付</span><em class="color">¥{{ orderDetails.service_money }}</em>
            <span>退款</span><em>¥{{ orderDetails.service_money }}</em>
        </p>
        <!-- <p class="tips"><span>12个月2G流量充值</span><em>¥20.00</em></p>
        <p class="tips"><span>延长打印机保修期：223456445</span><em>-</em></p>
        <p class="tips"><span>店铺置休</span><em>-</em></p> -->
        <p class="item">
            <span>微信支付单号</span><span>{{ orderDetails.pay_order_no }}</span>
        </p>
        <p class="item">
            <span>退款编号</span><span>{{ orderDetails.refund_info.refund_order_no }}</span>
        </p>
        <p class="item">
            <span>申请退款时间</span><span>{{ refundAt }}</span>
        </p>
        <p class="item">
            <span>退款金额</span><span>¥{{ orderDetails.refund_info.refund_money }}</span>
        </p>
        <p class="item">
            <span>退款理由</span><span>{{ orderDetails.refund_info.refund_reason }}</span>
        </p>
    </div>
    <!-- <div class="refund-details-bottom">
        撤销退款申请
    </div> -->
</div>
</template>

<script>
import {
    getRequest,
    FormatDateTimes,
    apiUrl
} from "@util/index";
import request from "@util/request";
import qs from "qs";
export default {
    data() {
        return {
            orderDetails: null,
        };
    },
    computed: {
      refundAt(){
          return FormatDateTimes(this.orderDetails.refund_info.refund_at)
      }  
    },
    methods: {
        initPage() {
            let data = {};
            data.action = "ShopService_getOrderDetail";
            data.id = this.param.id;
            request({
                method: "POST",
                url: apiUrl,
                headers: {
                    "Content-Type": "application/x-www-form-urlencoded",
                },
                data: data,
                transformRequest: [
                    function (data) {
                        return qs.stringify(data);
                    },
                ],
            }).then((res) => {
                let data = res.data.data;
                this.orderDetails = data;
            });
        },
    },
    mounted() {
        this.param = getRequest();
        this.initPage()
    },
};
</script>

<style lang="less">
@import "index.less";
</style>
